<template>
	<div>
		<aplid-base-crud layout="self" ref="crud" class="w-100" v-bind="{ ...baseConfig, ...$attrs }" :paramsObj="paramsObj">
			<template v-slot:table="{ tableData }">
				<div class="card-table-main">
					<div class="big_card" v-for="(row, index) in tableData" :key="index" @click="tiView(row)">
						<div class="card-header">
              <PreviewImg class="icon-img"  style="border-radius: 10px;width:50px;height:50px"  :src="row.organizationLogo || imgLog" alt="机构logo" :showFileList="false"></PreviewImg>
							<p class="text-title">{{ row.orgName }}</p>
						</div>
            <PreviewImg class="img_part" style="border-radius: 10px;width:100%;height:127px" :src="row.organizationLogo || default_org" alt="机构logo" :showFileList="false"></PreviewImg>
						<div class="content-box">
							<p>
								<span class="text-label">机构负责人：</span>
								<span class="text-value">{{ row.burdenUserName }}</span>
							</p>
							<p>
								<span class="text-label">联系电话：</span>
								<span class="text-value">{{ row.burdenUserPhone }}</span>
							</p>
							<p class="flex">
								<span class="text-label">详细地址：</span>
								<span class="text-value text-overflow" style="--line-clamp:2;">{{ row.orgAddress }}</span>
							</p>
						</div>
						<div class="footer-btn">
							<el-button type="primary">查看档案</el-button>
						</div>
					</div>
				</div>
			</template>
		</aplid-base-crud>
	</div>
</template>

<script setup lang="ts">
import PreviewImg from '@/views/aplid/DetailPage/ContentListItem/FileList/PreviewImg/index.vue'
import { baseConfig } from './config'
import { getStore } from '@/utils/store'
import imgLog from '@/assets/icons/org-logo.png'
import default_org from '@/assets/imgs/default_org.png'
let emit = defineEmits(['getRow', 'getableData'])
let paramsObj = ref({})
let crud = ref()

// 初始化全局参数
paramsObj.value = {
	authArea: getStore('userInfo').authArea,
	authCity: getStore('userInfo').authCity,
	authCommunity: getStore('userInfo').authCommunity,
	authProvince: getStore('userInfo').authProvince,
	authStreet: getStore('userInfo').authStreet,
	organizationId: getStore('userInfo').organizationId,
}

const tiView = (row) => {
	emit('getRow', row)
}
</script>
<style scoped lang="scss">
.card-table-main {
  display: flex;
  flex-flow: row wrap;
  gap:10px;
}
.big_card {
	width: calc(20% - 10px);
	min-height: vw(360);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	z-index: 0;
  position: relative;
  padding: 16px 18px;
	&::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		background: url('@/assets/imgs/icon-bg.png') no-repeat;
    background-size: 100% 100%;
		width: 100%;
		height: 100%;
		z-index: -1;
	}
	.card-header {
		width: 100%;
		padding: 21px 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.icon-img {
      min-width: 50px;
			width: 50px;
			height: 50px;
			border-radius: 10px;
      img{
        width: 100%;
        height: 100%;
      }
		}
		.text-title {
			font-family: 'Microsoft YaHei Bold';
			font-weight: 700;
			font-size: 20px;
			text-align: left;
			color: #1c1c28;
			@extend .text-overflow;
			width: vw(180);
		}
	}

	.img_part {
		height: vw(127);
		width: calc(100% - 20px);
		border-radius: 10px;
	}
	.content-box {
		width: calc(100% - 20px);
		margin: 10px 0 19px 0;
		.text-label {
			color: #1c1c28;
			font-size: 14px;
			font-family: 'Microsoft YaHei';
			font-weight: 700;
			letter-spacing: 0;
      min-width: vw(70);
		}
		.text-value {
			color: #666666;
			font-size: 14px;
			font-family: 'Microsoft YaHei';
			font-weight: 400;
			letter-spacing: 0;
		}
	}
	.footer-btn {
		position: relative;
	}
}
</style>
